<template>
    <div>
        <input type="text" v-model.lazy="addValue" @keyup.enter="onAdd">
        <button @click="onAdd">添加</button>
    </div>
    <ul>
        <!-- <li :class="item.done ? 'active' : ''" v-for="item in filterData" :key="item.id" @click="item.done = !item.done">
            {{ item.value }}
        </li> -->
        <li :class="{ active: item.done }" v-for="item in filterData" :key="item.id" @click="item.done = !item.done">
            {{ item.value }}
        </li>
    </ul>
    <p>统计: {{ doneTotal }}/{{ todoData.length }}</p>
    <div>
        <button v-for="item in buttons" :key="item.id" :disabled="item.id == currentButton"
            @click="currentButton = item.id">
            {{ item.name }}
        </button>
    </div>
</template>

<script setup>
import { computed, ref } from 'vue';

const todoData = ref([
    { id: 1, value: '学习HTML', done: false },
    { id: 2, value: '学习CSS', done: true },
    { id: 3, value: '学习Vue', done: false },
])

const addValue = ref('');
// 保存当前用户选择的按钮id
const currentButton = ref(1);
const buttons = [
    { id: 1, name: '全部' },
    { id: 2, name: '已完成' },
    { id: 3, name: '未完成' },
]

// 计算出已完成数
const doneTotal = computed(() => {
    return todoData.value.filter(item => item.done).length;
})
// 筛选出当前状态下的所有数据
const filterData = computed(() => {
    if (currentButton.value == 2) {
        return todoData.value.filter(item => item.done)
    }
    if (currentButton.value == 3) {
        return todoData.value.filter(item => !item.done)
    }
    return todoData.value;
})

function onAdd() {
    todoData.value.push({
        id: Date.now(),
        value: addValue.value,
        done: false
    });
    // 清空输入框
    addValue.value = '';
}


</script>

<style scoped>
.active {
    color: red;
    text-decoration: line-through;
}
</style>